<template>
  <CustomerLayout>
    <div class="store-list-page">
      <!-- 顶部搜索和排序区域 -->
      <div class="top-bar">
        <!-- 搜索区域 -->
        <div class="search-area">
          <el-input
            v-model="searchParams.keyword"
            placeholder="搜索商家、美食"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
        
        <!-- 分类筛选 -->
        <div class="category-filter" v-if="categories.length > 0">
          <el-scrollbar>
            <div class="category-list">
              <div 
                class="category-item" 
                :class="{ active: !searchParams.category }"
                @click="selectCategory('')"
              >
                全部
              </div>
              <div 
                v-for="category in categories" 
                :key="category.id"
                class="category-item"
                :class="{ active: searchParams.category === category.id.toString() }"
                @click="selectCategory(category.id.toString())"
              >
                {{ category.name }}
              </div>
            </div>
          </el-scrollbar>
        </div>
        
        <!-- 排序选项 -->
        <div class="sort-bar">
          <div 
            class="sort-item" 
            :class="{ active: searchParams.sortBy === SearchSort.RATING }"
            @click="changeSort(SearchSort.RATING)"
          >
            <span>评分最高</span>
            <el-icon v-if="searchParams.sortBy === SearchSort.RATING">
              
            </el-icon>
          </div>
          
          <div 
            class="sort-item" 
            :class="{ active: searchParams.sortBy === SearchSort.PRICE }"
            @click="changeSort(SearchSort.PRICE)"
          >
            <span>起送价格</span>
            <el-icon v-if="searchParams.sortBy === SearchSort.PRICE">
              
            </el-icon>
          </div>
          
          <div 
            class="sort-item" 
            :class="{ active: searchParams.sortBy === SearchSort.DISTANCE }"
            @click="changeSort(SearchSort.DISTANCE)"
          >
            <span>距离最近</span>
            <el-icon v-if="searchParams.sortBy === SearchSort.DISTANCE">
              
            </el-icon>
          </div>
          
          <div 
            class="sort-item" 
            :class="{ active: searchParams.sortBy === SearchSort.DELIVERY_TIME }"
            @click="changeSort(SearchSort.DELIVERY_TIME)"
          >
            <span>配送时间</span>
            <el-icon v-if="searchParams.sortBy === SearchSort.DELIVERY_TIME">
              
            </el-icon>
          </div>
          
          <!-- <div 
            class="sort-item" 
            :class="{ active: searchParams.sortBy === SearchSort.SALES }"
            @click="changeSort(SearchSort.SALES)"
          >
            <span>销量优先</span>
            <el-icon v-if="searchParams.sortBy === SearchSort.SALES">
              <CaretTop />
            </el-icon>
          </div> -->
          
          <div class="filter-btn" @click="showFilter = true">
            <el-icon><Filter /></el-icon>
            <span>筛选</span>
          </div>
        </div>
      </div>
      
      <!-- 主内容区域 - 分为左右两栏 -->
      <div class="main-content">
        <!-- 左侧商家列表 -->
        <div class="store-list-container">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-container">
            <el-skeleton :rows="3" animated v-for="i in 5" :key="i" style="margin-bottom: 20px"/>
          </div>
          
          <!-- 空状态 -->
          <el-empty 
            v-else-if="stores.length === 0" 
            description="暂无相关商家"
            :image-size="200"
          >
            <el-button @click="resetFilters">重置筛选</el-button>
          </el-empty>
          
          <!-- 商家列表 -->
          <div v-else class="store-list">
            <div
              v-for="store in stores"
              :key="store.id"
              class="store-item"
              :class="{ 'active': selectedStore && selectedStore.id === store.id }"
              @click="selectStore(store)"
            >
              <div class="store-logo">
                <el-image
                  :src="store.logo || store.coverImage"
                  fit="cover"
                  :lazy="true"
                >
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <div class="store-status" :class="store.status">
                  {{ getStatusText(store.status) }}
                </div>
              </div>
              
              <div class="store-info">
                <h3 class="store-name">{{ store.name }}</h3>
                
                <div class="store-rating">
                  <el-rate
                    v-model="store.rating"
                    disabled
                    text-color="#ff9900"
                    :show-score="true"
                    score-template="{value}"
                  />
                  <span class="monthly-sales">月售 {{ store.monthSales }}+</span>
                </div>
                
                <div class="store-tags">
                  <el-tag size="small" effect="plain" v-if="store.type">{{ store.type }}</el-tag>
                  <el-tag size="small" effect="plain" type="info">起送 ¥{{ store.minOrder }}</el-tag>
                </div>
                
                <div class="store-delivery">
                  <span class="time">{{ store.deliveryTime }}分钟</span>
                  <span class="distance" v-if="store.distance">{{ formatDistance(store.distance) }}</span>
                </div>
              </div>
            </div>
            
            <!-- 加载更多 -->
            <div v-if="hasMore" class="load-more">
              <el-button text @click="loadMore">加载更多</el-button>
            </div>
            <div v-else-if="stores.length > 0" class="no-more">
              没有更多了
            </div>
          </div>
        </div>
        
        <!-- 右侧商家详情 -->
        <div class="store-detail-container">
          <div v-if="!selectedStore" class="empty-detail">
            <el-empty description="请选择商家查看详情" :image-size="200">
              <template #image>
                <img src="/logo.png" alt="Logo" style="width: 120px; height: 120px;"/>
              </template>
            </el-empty>
          </div>
          
          <div v-else class="store-detail">
            <div class="store-header">
              <div class="store-avatar">
                <el-image
                  :src="selectedStore.logo || selectedStore.coverImage"
                  fit="cover"
                  class="avatar-image"
                >
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>
              
              <div class="store-basic">
                <h2 class="store-title">{{ selectedStore.name }}</h2>
                <div class="store-status-detail">
                  <el-tag 
                    :type="selectedStore.status === 'OPEN' ? 'success' : 'info'"
                    effect="dark"
                  >
                    {{ getStatusText(selectedStore.status) }}
                  </el-tag>
                </div>
              </div>
              
              <div class="store-actions">
                <el-button 
                  :type="isFavorite ? 'danger' : 'info'" 
                  circle
                  @click.stop="toggleFavorite"
                  :loading="favoriteLoading"
                  :class="{ 'favorited': isFavorite }"
                >
                  <el-icon>
                    <StarFilled v-if="isFavorite" />
                    <Star v-else />
                  </el-icon>
                </el-button>
                <el-button 
                  type="primary" 
                  @click="goToStore(selectedStore.id)"
                >
                  进入店铺
                </el-button>
              </div>
            </div>
            
            <div class="store-stats-detail">
              <div class="stat-item">
                <div class="stat-label">评分</div>
                <div class="stat-value">{{ selectedStore.rating }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">月售</div>
                <div class="stat-value">{{ selectedStore.monthSales }}+</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">配送时间</div>
                <div class="stat-value">{{ selectedStore.deliveryTime }}分钟</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">起送价</div>
                <div class="stat-value">¥{{ selectedStore.minOrder }}</div>
              </div>
            </div>
            
            <div class="store-promotions" v-if="selectedStore.promotion">
              <h3>优惠活动</h3>
              <div class="promotion-list">
                <div class="promotion-item">
                  <el-tag type="danger" effect="plain">{{ selectedStore.promotion }}</el-tag>
                </div>
              </div>
            </div>
            
            <div class="popular-foods" v-if="popularFoods.length > 0">
              <h3>热门商品</h3>
              <div class="food-preview-list">
                <div 
                  v-for="food in popularFoods" 
                  :key="food.id"
                  class="food-preview-item"
                >
                  <el-image
                    :src="food.image"
                    fit="cover"
                    class="food-image"
                  >
                    <template #error>
                      <div class="image-placeholder">
                        <el-icon><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                  <div class="food-info">
                    <div class="food-name">{{ food.name }}</div>
                    <div class="food-price">¥{{ food.price }}</div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="go-to-store">
              <el-button 
                type="primary" 
                size="large" 
                @click="goToStore(selectedStore.id)"
                style="width: 100%;"
              >
                查看全部菜单
              </el-button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 筛选抽屉 -->
      <el-drawer
        v-model="showFilter"
        title="筛选条件"
        direction="rtl"
        size="300px"
      >
        <div class="filter-panel">
          
          
          <div class="filter-section">
            <h3>价格区间</h3>
            <div class="price-slider">
              <div class="slider-label">
                <span>最低起送价</span>
                <span class="price-text">¥{{ filters.minPrice }}</span>
              </div>
              <el-slider 
                v-model="filters.minPrice" 
                :min="0" 
                :max="100" 
                :step="5"
              />
              
              <div class="slider-label">
                <span>最高起送价</span>
                <span class="price-text">¥{{ filters.maxPrice }}</span>
              </div>
              <el-slider 
                v-model="filters.maxPrice" 
                :min="0" 
                :max="100" 
                :step="5"
              />
            </div>
          </div>
          
          <div class="filter-buttons">
            <el-button @click="resetFilters">重置</el-button>
            <el-button type="primary" @click="applyFilters">确定</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </CustomerLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Search, Filter, Picture, CaretTop, Star, StarFilled } from '@element-plus/icons-vue';
import CustomerLayout from '@/components/customer/CustomerLayout.vue';
import { storeApi, categoryApi, favoriteApi, historyApi, foodApi } from '@/api/customer';
import type { Store, Category, Food, StoreSearchSort } from '@/types/customer';
import { StoreSearchSort as SearchSort } from '@/types/customer';

const router = useRouter();

// 搜索参数
const searchParams = reactive({
  keyword: '',
  category: '',
  sortBy: SearchSort.RATING,  // 使用枚举类型
  page: 1,
  pageSize: 10
});

// 筛选条件
const filters = reactive({
  types: [] as string[],
  minRating: 0,
  maxDeliveryTime: 0,
  minPrice: 0,
  maxPrice: 100
});

// 筛选选项
const filterOptions = reactive({
  types: ['中餐', '快餐', '西餐', '日料', '甜点', '火锅'],
  ratings: [3, 4, 4.5],
  deliveryTimes: [15, 30, 45, 60]
});

// 数据状态
const stores = ref<Store[]>([]);
const categories = ref<Category[]>([]);
const selectedStore = ref<Store | null>(null);
const popularFoods = ref<Food[]>([]);
const loading = ref(false);
const total = ref(0);
const hasMore = ref(false);
const showFilter = ref(false);
const isFavorite = ref(false);
const favoriteLoading = ref(false);

// 格式化距离
const formatDistance = (distance: number): string => {
  if (distance < 1) {
    return `${(distance * 1000).toFixed(0)}m`;
  }
  return `${distance.toFixed(1)}km`;
};

// 获取状态文本
const getStatusText = (status?: string): string => {
  if (!status) return '未知';
  
  const statusMap: Record<string, string> = {
    'OPEN': '营业中',
    'CLOSED': '已打烊',
    'PENDING': '待开业',
    'SUSPENDED': '已停业',
    'BUSY': '繁忙中',
    'COMING_SOON': '即将营业'
  };
  
  return statusMap[status] || status;
};

// 获取商家列表
const fetchStores = async (reset = false) => {
  try {
    loading.value = true;
    
    // 构建符合后端DTO的参数
    const params = {
      keyword: searchParams.keyword || undefined,
      categoryId: searchParams.category ? parseInt(searchParams.category) : undefined,
      longitude: undefined, // TODO: 获取用户位置
      latitude: undefined,  // TODO: 获取用户位置
      sortBy: searchParams.sortBy,
      minPrice: filters.minPrice > 0 ? filters.minPrice : undefined,
      maxPrice: filters.maxPrice < 100 ? filters.maxPrice : undefined,
      page: searchParams.page,
      size: searchParams.pageSize
    };
    
    console.log('发送的API参数:', params); // 调试日志
    
    // 统一使用 storeApi.getStores 接口
    const res = await storeApi.getStores(params);
    
    if (res && res.data) {
      // 处理API响应数据结构，根据实际返回的格式
      const responseData = res.data;
      let storeList: Store[] = [];
      let totalCount = 0;
      
      console.log('API响应数据:', responseData); // 调试日志
      
      // 首先检查是否有嵌套的data结构（如 {status, message, data: {content, ...}}）
      let actualData = responseData;
      if (responseData.data && typeof responseData.data === 'object') {
        actualData = responseData.data;
        console.log('使用嵌套的data:', actualData); // 调试日志
      }
      
      // 处理标准Spring Boot分页响应格式
      if (actualData.content && Array.isArray(actualData.content)) {
        const rawStoreList = actualData.content;
        totalCount = actualData.totalElements || 0;
        
        // 映射字段名称，确保与前端Store类型匹配
        storeList = rawStoreList.map((store: any) => ({
          ...store,
          // 关键字段映射（API字段 -> 前端字段）
          monthSales: store.monthlySales || 0,  // API: monthlySales -> 前端: monthSales
          deliveryTime: store.averageDeliveryTime || 30,  // API: averageDeliveryTime -> 前端: deliveryTime  
          minOrder: store.minOrderAmount || 0,  // API: minOrderAmount -> 前端: minOrder
          coverImage: store.logo || '',  // 使用logo作为封面图
          
          // 确保数值字段正确处理
          deliveryFee: Number(store.deliveryFee) || 0,
          distance: Number(store.distance) || 0,
          rating: Number(store.rating) || 0,
          
          // 确保数组和字符串字段有默认值
          tags: store.tags || [],
          businessHours: store.businessHours || '营业时间未设置',
          phone: store.phone || '',
          address: store.address || '',
          description: store.description || '',
          
          // 处理可选字段
          promotion: store.hasPromotion ? '优惠活动' : null,
          type: store.categoryName || '',
          
          // 保留原始字段（向后兼容）
          logo: store.logo,
          longitude: store.longitude,
          latitude: store.latitude,
          categoryId: store.categoryId,
          status: store.status || 'UNKNOWN'
        }));
        
        console.log('处理后的店铺列表:', storeList); // 调试日志
        console.log('总数量:', totalCount); // 调试日志
      } else if (Array.isArray(actualData.data)) {
        // 兼容其他可能的数据格式
        storeList = actualData.data;
        totalCount = actualData.total || storeList.length;
      } else if (Array.isArray(actualData)) {
        // 直接数组格式
        storeList = actualData;
        totalCount = storeList.length;
      } else {
        console.warn('未识别的数据格式:', actualData);
      }
      
      if (reset) {
        stores.value = storeList;
      } else {
        stores.value = [...stores.value, ...storeList];
      }
      
      total.value = totalCount;
      hasMore.value = stores.value.length < totalCount;
      
      console.log('最终stores.value:', stores.value); // 调试日志
      console.log('hasMore:', hasMore.value, 'total:', total.value); // 调试日志
      
      // 默认选中第一个商家
      if (stores.value.length > 0 && !selectedStore.value) {
        selectStore(stores.value[0]);
      }
    } else {
      console.warn('API响应无数据:', res);
    }
  } catch (error) {
    console.error('获取商家列表失败:', error);
    ElMessage.error('获取商家列表失败');
  } finally {
    loading.value = false;
  }
};

// 获取分类列表
const fetchCategories = async () => {
  try {
    const res = await categoryApi.getCategories();
    if (res && res.data) {
      categories.value = res.data;
    }
  } catch (error) {
    console.error('获取分类失败:', error);
  }
};

// 获取热门商品
const fetchPopularFoods = async (storeId: number | string) => {
  try {
    // 获取商店的食品列表，然后取前5个作为热门商品
    const res = await foodApi.getStoreFoods(String(storeId));
    console.log('获取热门商品API响应:', res); // 调试日志
    
    if (res && res.data) {
      // 处理API响应数据结构
      let foodList: any[] = [];
      
      // 检查是否有嵌套的data结构
      if (Array.isArray(res.data)) {
        foodList = res.data;
      } else if ((res.data as any).data && Array.isArray((res.data as any).data)) {
        foodList = (res.data as any).data;
      } else {
        console.warn('未识别的食物数据格式:', res.data);
        foodList = [];
      }
      
      // 只显示上架状态的商品，并取前5个
      const availableFoods = foodList.filter((food: any) => food.status === 'ON_SHELF');
      popularFoods.value = availableFoods.slice(0, 5);
      
      console.log('处理后的热门商品:', popularFoods.value); // 调试日志
    } else {
      popularFoods.value = [];
    }
  } catch (error) {
    console.error('获取热门商品失败:', error);
    popularFoods.value = [];
  }
};

// 检查是否已收藏
const checkFavorite = async (storeId: number | string) => {
  try {
    favoriteLoading.value = true;
    const res = await favoriteApi.checkStoreFavorite(Number(storeId));
    console.log('检查收藏状态API响应:', res); // 调试日志
    
    // 根据API返回判断是否已收藏
    // API返回格式: {"status":200,"message":"操作成功","data":1} 
    // 其中 data: 0表示未收藏，1表示收藏
    if (res && res.data !== undefined) {
      // 检查实际的data字段值
      const favoriteStatus = res.data.data !== undefined ? res.data.data : res.data;
      isFavorite.value = favoriteStatus === 1;
      console.log('收藏状态:', isFavorite.value, '原始值:', favoriteStatus, '完整响应:', res.data); // 调试日志
    } else {
      isFavorite.value = false;
    }
  } catch (error) {
    console.error('检查收藏状态失败:', error);
    // 如果接口返回404等错误，说明未收藏
    isFavorite.value = false;
  } finally {
    favoriteLoading.value = false;
  }
};

// 切换收藏状态
const toggleFavorite = async () => {
  if (!selectedStore.value) return;
  
  try {
    favoriteLoading.value = true;
    console.log('切换收藏状态，当前状态:', isFavorite.value); // 调试日志
    
    if (isFavorite.value) {
      // 取消收藏，直接使用店铺ID
      await favoriteApi.removeFavoriteStore(selectedStore.value.id);
      ElMessage.success('已取消收藏');
      isFavorite.value = false;
      console.log('取消收藏成功，新状态:', isFavorite.value); // 调试日志
    } else {
      // 添加收藏
      await favoriteApi.addFavoriteStore(selectedStore.value.id);
      ElMessage.success('收藏成功');
      isFavorite.value = true;
      console.log('添加收藏成功，新状态:', isFavorite.value); // 调试日志
    }
  } catch (error) {
    console.error('操作收藏失败:', error);
    ElMessage.error('操作失败，请稍后重试');
  } finally {
    favoriteLoading.value = false;
  }
};

// 加载更多
const loadMore = () => {
  if (loading.value || !hasMore.value) return;
  
  searchParams.page += 1;
  fetchStores();
};

// 搜索
const handleSearch = () => {
  searchParams.page = 1;
  fetchStores(true);
};

// 选择分类
const selectCategory = (categoryId: string) => {
  searchParams.category = categoryId;
  searchParams.page = 1;
  selectedStore.value = null;
  fetchStores(true);
};

// 改变排序方式
const changeSort = (sortBy: StoreSearchSort) => {
  // 简单地切换排序方式，排序逻辑由后端处理
  searchParams.sortBy = sortBy;
  searchParams.page = 1;
  fetchStores(true);
};

// 应用筛选
const applyFilters = () => {
  searchParams.page = 1;
  fetchStores(true);
  showFilter.value = false;
};

// 重置筛选
const resetFilters = () => {
  Object.assign(filters, {
    types: [],
    minRating: 0,
    maxDeliveryTime: 0,
    minPrice: 0,
    maxPrice: 100
  });
  
  searchParams.page = 1;
  fetchStores(true);
  showFilter.value = false;
};

// 选择商家
const selectStore = async (store: Store) => {
  selectedStore.value = store;
  
  // 获取商家详情
  await Promise.all([
    fetchPopularFoods(store.id),
    checkFavorite(store.id)
  ]);
};// 进入商家详情页
const goToStore = async (storeId: number | string) => {
  // 查找对应的商家，检查状态
  const store = stores.value.find(s => s.id === storeId);
  
  if (store && store.status !== 'OPEN') {
    ElMessage.warning(`${getStatusText(store.status)}，暂时无法下单`);
    return;
  }
  
  // 添加浏览历史
  try {
    await historyApi.addHistory(Number(storeId));
  } catch (error) {
    console.error('添加浏览历史失败:', error);
  }
  
  router.push(`/customer/store/${storeId}`);
};

// 初始化
onMounted(() => {
  Promise.all([
    fetchCategories(),
    fetchStores(true)
  ]);
});
</script>

<style scoped>
.store-list-page {
  padding: 20px;
}

/* 顶部区域 */
.top-bar {
  margin-bottom: 20px;
}

.search-area {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.category-filter {
  margin-bottom: 15px;
}

.category-list {
  display: flex;
  gap: 10px;
  padding: 5px 0;
}

.category-item {
  padding: 6px 12px;
  border-radius: 16px;
  background-color: #f5f5f5;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
}

.category-item.active {
  background-color: #ff9800;
  color: white;
}

.sort-bar {
  display: flex;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

.sort-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #666;
  margin-right: 10px;
}

.sort-item.active {
  color: #ff9800;
  font-weight: bold;
}

.sort-item .el-icon {
  margin-left: 5px;
}

.filter-btn {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: auto;
  color: #666;
}

.filter-btn .el-icon {
  margin-right: 5px;
}

/* 主内容区域 */
.main-content {
  display: flex;
  gap: 20px;
}

/* 左侧列表 */
.store-list-container {
  width: 40%;
  min-width: 300px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 15px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.store-item {
  display: flex;
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
}

.store-item:hover {
  background-color: #f5f7fa;
}

.store-item.active {
  border-color: #ff9800;
  background-color: #fff9f0;
}

.store-logo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.store-logo .el-image {
  width: 100%;
  height: 100%;
}

.store-status {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 0 8px 0 8px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.store-status.OPEN {
  background-color: #67c23a;
}

.store-status.CLOSED {
  background-color: #909399;
}

.store-status.BUSY {
  background-color: #e6a23c;
}

.store-info {
  margin-left: 15px;
  flex: 1;
}

.store-name {
  font-size: 16px;
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-rating {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.monthly-sales {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.store-tags {
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.store-delivery {
  font-size: 12px;
  color: #666;
  display: flex;
  gap: 10px;
}

.load-more, .no-more {
  padding: 10px;
  text-align: center;
  color: #999;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #909399;
  font-size: 20px;
}

/* 右侧详情 */
.store-detail-container {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.empty-detail {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.store-detail {
  display: flex;
  flex-direction: column;
}

.store-header {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.store-avatar {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.store-basic {
  flex: 1;
}

.store-title {
  margin: 0 0 10px;
  font-size: 20px;
}

.store-status-detail {
  margin-top: 5px;
}

.store-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.store-actions .favorited {
  background-color: #f56c6c !important;
  border-color: #f56c6c !important;
  color: white !important;
}

.store-actions .favorited .el-icon {
  color: white !important;
}

.store-stats-detail {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #ff9800;
}

.store-promotions, .popular-foods {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.store-promotions h3, .popular-foods h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
}

.promotion-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.food-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.food-preview-item {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
  cursor: pointer;
}

.food-preview-item:hover {
  transform: translateY(-5px);
}

.food-image {
  width: 100%;
  height: 100px;
}

.food-info {
  padding: 5px;
}

.food-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.food-price {
  font-size: 14px;
  color: #ff6b6b;
  font-weight: bold;
}

.go-to-store {
  padding: 15px;
}

/* 筛选面板 */
.filter-panel {
  padding: 15px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-section h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-slider {
  padding: 10px 0;
}

.slider-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.price-text {
  color: #ff6b6b;
  font-weight: bold;
}

.filter-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .main-content {
    flex-direction: column;
  }
  
  .store-list-container, .store-detail-container {
    width: 100%;
    max-height: none;
  }
  
  .store-list-container {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .search-area {
    flex-direction: column;
  }
  
  .sort-bar {
    padding: 5px;
  }
  
  .sort-item, .filter-btn {
    padding: 5px 8px;
    font-size: 14px;
  }
  
  .store-stats-detail {
    flex-wrap: wrap;
  }
  
  .stat-item {
    width: 50%;
    margin-bottom: 10px;
  }
}
</style>
